import React, { useState } from "react";
import { ImageUploader,Input,Toast } from 'antd-mobile'
import styled from 'styled-components'
import ButtonAgain from "../components/ButtonAgain";
import NavBarAgain from "../components/NavBarAgain";
import { connect } from 'react-redux'
import action from '../store/action'
import * as api from '../api/index'

const UpdateBox = styled.div`
    .item{
        display: flex;
        align-items: center;
        margin: 15px;
        .label{
            font-size: 32px;
            color: #000;
            margin-left: 35px;
        }
        .input{
            margin-left: 35px;
        }
        .adm-input-element{
            font-size: 32px;
        }
    }
    .submit{
        top: 25px;
        left: 50%;
        width: 50%;
        font-size: 32px;
        transform: translateX(-50%);
    }
`
const Update = function Update(props){
    const {info,queryUserInfoAsync,navigate}  = props
    //const [pic,setPic] = useState(info.pic),
    const [pic,setPic] = useState([{url:info.pic}]),
        [username,setUsername] = useState(info.name)
    const limitImage = (file)=>{
        //console.log(file);
        const limit = 1024 * 1024 * 10
        if(file.size > limit){
            Toast.show({
                icon:'fail',
                content:'图片必须在10MB以内'
            })
            return null
        }
        return file
    }
    const uploadImage = async (file)=>{
        let temp
        try{
            const {code,pic} = await api.upload(file)
            if(+code !== 0){
                Toast.show({
                    icon:'fail',
                    content:'上传失败'
                })
                return
            }
            temp = pic
            setPic([{url:pic}])
        }catch(e){}
        return {url:temp}
    }

    const submit = async ()=>{
        if(pic.length === 0){
            Toast.show({
                icon:'fail',
                content:'请先上传图片'
            })
            return;
        }
        if(username.trim() === ''){
            Toast.show({
                icon:'fail',
                content:'请先输入账号'
            })
            return;
        }

        let [{url}] = pic
        try{
            let { code } = await api.userUpdate(username.trim(),url)
            if(+code !== 0){
                Toast.show({
                    icon:'fail',
                    content:'上传失败'
                })
                return
            }
            Toast.show({
                icon:'success',
                content:'上传成功'
            })
            queryUserInfoAsync() 
            navigate(-1)
        }catch(e){}
    }

    return <UpdateBox>
        <NavBarAgain title='修改信息' />
        <div className="formBox">
            <div className="item">
                <div className="label">头像</div>
                <div className="input">
                    <ImageUploader maxCount={1} //最多上传1张图片
                        value={pic} 
                        onDelete={()=>{ setPic([]) }}
                        beforeUpload={limitImage} //图片上传去校验
                        upload={uploadImage} //实现文件上传
                    />
                </div>
            </div>
            <div className="item">
                <div className="label">姓名</div>
                <div className="input">
                    <Input placeholder="青输入账号名称" value={username} 
                        onChange={(val)=>{
                            setUsername(val)
                        }}
                    />
                </div>
            </div>
            <ButtonAgain color='primary' className='submit' onClick={submit}>
                提交
            </ButtonAgain>
        </div>
    </UpdateBox>
}
export default connect(state => state.base,action.base)(Update)